{*
SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ import "../../_libs/common" }}

{{- if .Item.Type == "photo" && isset(.Item.Resources.image) -}}
  <figure class="mb-8">
    <img alt="" src="{{ .Item.Resources.image.Src }}"
    class="mx-auto"
    width="{{ .Item.Resources.image.Width }}" height="{{ .Item.Resources.image.Height }}">
  </figure>
{{- else if .Item.Type == "video" && isset(.Item.Resources.image) && .Item.Embed -}}
  <div class="video-player mb-8" data-controller="video">
    <img alt="" src="{{ .Item.Resources.image.Src }}"
      width="{{ .Item.Resources.image.Width }}" height="{{ .Item.Resources.image.Height }}">
    <template data-video-target="embed">
      {{- raw(.Item.Embed) -}}
    </template>
    <template data-video-target="play">
      <button class="play-button" data-action="click->video#play">
        <span></span>
      </button>
    </template>
  </div>
{{- end -}}

{{- if .Item.HasArticle -}}
<turbo-frame id="bookmark-content-{{ .Item.ID }}"
 src="{{ urlFor(`/api/bookmarks`, .Item.ID) }}/article"
 disabled
 data-controller="annotations"
 data-action="request:annotation-removed@document->annotations#reload"
 data-annotations-api-url-value="{{ urlFor(`/api/bookmarks`, .Item.ID) }}/annotations"
 data-annotations-hidden-class="hidden"
>
<div class="bookmark-article max-w-3xl mx-auto print:max-w-none relative">
  <div class="hidden absolute z-50"
    data-annotations-target="controlls">
      <button data-annotations-target="controllCreate" data-action="click->annotations#save"
      class="p-4 bg-gray-700 text-white hf:text-primary-light rounded-lg shadow-lg
      dark:bg-gray-300 dark:hf:text-primary-dark"
      title="highlight selection">{{ yield icon(name="o-highlight") }} Highlight</button>
      <button data-annotations-target="controllDelete" data-action="click->annotations#delete"
      class="p-4 bg-red-800 text-red-100 hf:text-white rounded-lg shadow-lg
      dark:bg-red-400 dark:text-gray-900 dark:hf:text-white"
      title="remove highlight(s)">{{ yield icon(name="o-trash") }} Remove Highlight(s)</button>
  </div>

  <div class="prose font-lora leading-normal text-lg overflow-x-auto"
    lang="{{ .Item.Lang }}"
    dir="{{ default(.Item.TextDirection, "ltr") }}"
    data-controller="reader"
    data-annotations-target="root">
    {{- unsafeWrite(.HTML) -}}
  </div>
  {{- include "./bookmark_qrcode" }}
</div>
</turbo-frame>
{{- else -}}
  {{- include "./bookmark_qrcode" }}
{{- end -}}
